import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Input, Icon, message, Button, Form ,Select} from 'antd';
import styles from '../index.less';
import AuctionModal from '../../AuctionModal';
import CoverModal from '../../AuctionModal/CoverModal';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

@connect(state => ({

}))
@Form.create()

export default class BodySeparator extends PureComponent {
  state = {
    topNum:1 ,
    title:'' }
  componentDidMount() {
    const propsData = this.props.value.data;
    this.setState({
      topNum: propsData.topNum,
      title: propsData.title
    })
  }
  componentWillReceiveProps(nextProps) {
    
  }
  handleTopNumChange = (val) => {
    this.setState({
      topNum: val
    })
  }
  handleTitleChange = (e) => {
    this.setState({
      title: e.target.value
    })
  }

  handleOk = () => {
    const data = this.state;
    if (this.props.onChange) this.props.onChange(data);
  }
  render() {
    const orderNoArr = [
      {value:1},
      {value:2},
      {value:3},
      {value:4},
      {value:5},
      {value:6},
      {value:7},
      {value:8},
      {value:9},
      {value:10}
    ]
    return (
      <div>
        <div>
          <p>序号(1-10):</p>
          <Select allowClear
            showSearch
            style={{ width: 160, marginRight: 8 }}
            value={this.state.topNum}
            onChange={this.handleTopNumChange}
          >
            {orderNoArr.map((item,index)=> <Option key={index} value={item.value}>{item.value}</Option>)}
          </Select>
          <p style={{color:'#dd231f',fontSize:'12px'}}>必须是后面值中的一个1，2，3，4，5，6，7，8，9，10</p>
        </div>
        <div style={{marginTop:'10px'}}>
          <p>标题:</p>
          <Input style={{padding:'10px 0'}} value={this.state.title} onChange={this.handleTitleChange}/>
        </div>
        <div style={{ height: '40px' ,marginTop:'10px'}}>
          <Button type="primary" style={{ float: 'right' }} onClick={this.handleOk}>确定</Button>
        </div>
      </div>
    );
  }
}
